import { CloseCircleOutlined } from '@ant-design/icons';
import {
  deleteSearchHistory,
  deleteSingleSearchHistory,
  deleteSearchHistoryByModule,
} from '../../../designer/service';

import { InbizIcon } from '@inbiz/utils';

const historyCls = 'search-engine-history'; // 历史搜索样式名

// 历史搜索组件
function HistorySearch(props: any) {
  const { config, show, historyData, onchange, onClick } = props;
  // 删除Ecm搜索历史记录
  const onHistoryDelete = async (value: any) => {
    if (typeof value == 'object') {
      // 删除全部

      if (config?.isDMS) {
        // 文档的全部删除
        await deleteSearchHistory().then((res) => {
          if (res.result == 0) {
            onchange('all');
          }
        });
      } else {
        // 档案的全部删除

        let ModuleName = config.guid;

        await deleteSearchHistoryByModule(ModuleName).then((res) => {
          if (res.Code == 0) {
            onchange('all');
          }
        });
      }
    } else {
      // 单个删除
      let ModuleName = config.guid;
      let delWord = value;

      await deleteSingleSearchHistory(ModuleName, delWord).then((res) => {
        if (res.Code == 0) {
          onchange();
        }
      });
    }
  };

  return (
    !!historyData?.length && (
      <div
        className={[`${historyCls}`, show ? `${historyCls}-show` : ''].join(' ')}
        onClick={onClick}
      >
        <div className={`${historyCls}-title`}>
          <InbizIcon
            type="icon-ic-lishisousuo"
            className={['icon', `${historyCls}-icon`].join(' ')}
          />
          {/* {intl.formatMessage({ id: 'historySearch' })} */}
          <span className="clear-history-text" onClick={onHistoryDelete}>
            <InbizIcon type="icon-ic-qingchulishi" className="icon" />
            {/* {intl.formatMessage({ id: 'clearHistory' })} */}
          </span>
        </div>
        <ul className={`${historyCls}-content`}>
          {historyData.slice(0, 8).map((item: any, index: any) => {
            return (
              <li key={`${item}-${index}`}>
                <div className={`${historyCls}-item`} title={item}>
                  {item}
                  <CloseCircleOutlined
                    onClick={() => onHistoryDelete(item)}
                    className={`${historyCls}-delete`}
                  />
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    )
  );
}
export default HistorySearch;
